<script setup lang="ts">
import { loginByPasswordApi } from '@/apis/user';
import { useUserStore } from '@/stores/user';
import { ref } from 'vue';

defineOptions({
  options: {
    styleIsolation: "shared",
  },
});
// 手机号 + 验证码登录
const formData = ref({
  mobile: "13230000049",
  password: "",
});

const form = ref<UniHelper.UniFormsInstance>();
const formRules: UniHelper.UniFormsRules = {
  mobile: {
    rules:[
    { required: true, errorMessage: "请输入账号" },
    { pattern: /^1[3456789]\d{9}$/, errorMessage: "账号格式不正确"},
  ]},
  password: {
    rules:[
    { required: true, errorMessage: "请输入密码" },
    { pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/, errorMessage: "密码格式不正确"},
  ]}
}

// 提交表单
const onSubmit = async () => {
  try {
    // 校验表单所有字段
    // await form.value?.validate?.();
    // 判断是否同意用户协议
    if (!isAgree.value) {
      return uni.showToast({ title: "请勾选同意用户协议" ,icon: 'none' });
    }
    const res = await loginByPasswordApi(formData.value);
    const stroge = useUserStore();
    stroge.setToken(res.token);
    console.log("登录成功", res);
    uni.switchTab({ url: "/pages/index/index" });
  } catch (error) {
    console.log(error);
  }
};

// 是否同意用户协议
const isAgree = ref(false);
</script>
<template>
  <uni-forms class="login-form" ref="form">
    <uni-forms-item name="mobile">
      <uni-easyinput
        :input-border="false"
        :clearable="false"
        placeholder="请输入手机号"
        placeholder-style="color: #C3C3C5"
        v-model="formData.mobile"
      />
      />
    </uni-forms-item>
    <uni-forms-item name="password">
      <uni-easyinput
        type="password"
        placeholder="请输入密码"
        :input-border="false"
        placeholder-style="color: #C3C3C5"
        v-model="formData.password"
      />
    </uni-forms-item>
    <view class="agreement">
      <radio :checked="false" color="#16C2A3" />
      我已同意
      <text class="link">用户协议</text>
      及
      <text class="link">隐私协议</text>
    </view>

    <button class="uni-button" @click="onSubmit()">登 录</button>
    <navigator hover-class="none" class="uni-navigator" url=" ">
      忘记密码？
    </navigator>
  </uni-forms>
</template>


<style lang="scss">
  @import './styles.scss';
</style>